<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Style Switcher</title>
    <link rel="stylesheet" href="css/style-switcher.css">
</head>
<body>
    <h3>Abraham Lincoln's Gettysburg Address</h3>
    <div id="switcher">
        <div class="label">Text Size</div>
        <button id="switcher-default">Defautl</button>
        <button id="switcher-large">Bigger</button>
        <button id="switcher-small">Smaller</button>
    </div>
    <div class="speech">
        <p>
            Fourscore and seven years ago our fathers brought forth on this continent a new nation, conceived in liberty, and dedicated
            to the proposition that all men are created equal.
        </p>
        <p>
            New we are engaged in a great civil war, testing whether that nation. or any nation so conceived and so dedicated, can long
            endure. We are met on a great battlefield of that war. We have come to dedicate a portion of that field as a
            final resting-place for those who here gave their lives that the nation might live. Is is altogether fitting
            and proper that we should do this. But, in a larger sense, We cannot dedicate, we cannot consecrate, we cannot
            hallow, this ground.
        </p>
        <a href="#" class="more">read more</a>
        <p>
            The brave men, living and dead, who struggled here have consecrated it, far above our poor power ...
        </p>
    </div>
    <script src="../node_modules/jquery/dist/jquery.js"></script>
    <script src="js/style-switcher.js"></script>
</body>
</html>